<template>
	<view class="cooperate-content">
	<scroll-view class="cooperate-content-page" scroll-y>
		<view class="cooperate-content-top">
			<image src="/static/images/1.jpg" mode="aspectFill"></image>
		</view>
		<view class="cooperate-content-center">
			<view class="cooperate-aboutUs">
				<view class="cooperate-aboutUs-title">
					关于我们
				</view>
				<view class="cooperate-aboutUs-info" v-html="Infotext">
					
				</view>
			</view>
			
			<view class="cooperate-joinUs">
				<view class="cooperate-joinUs-title">
					加入我们
				</view>
				<view class="cooperate-joinUs-form">
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="姓名" required name="name" label-width="150rpx">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名"  :input-border="false"  />
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="phone"  label-width="150rpx">
						<uni-easyinput v-model="valiFormData.phone" placeholder="请输入手机号" :input-border="false" />
					</uni-forms-item>
					<uni-forms-item label="商家名称" required name="businessName" label-width="150rpx" >
						<uni-easyinput v-model="valiFormData.businessName" placeholder="请输入商家名称"  :input-border="false" />
					</uni-forms-item>
					<uni-forms-item label="商家类型" required name="businessType" label-width="150rpx">
						<uni-easyinput v-model="valiFormData.businessType" placeholder="" :input-border="false"  />
					</uni-forms-item>
					<uni-forms-item label="合作地区" required name="categoryArea" label-width="150rpx">
						<uni-easyinput v-model="valiFormData.categoryArea" placeholder=""  :input-border="false" />
					</uni-forms-item>
					<uni-forms-item label="详细地址" required name="address" label-width="150rpx">
						<uni-easyinput v-model="valiFormData.address" placeholder="请输入详细的商铺地址"  :input-border="false"  />
					</uni-forms-item>
				</uni-forms>
				<button class="submitbtn" type="primary" @click="submit('valiForm')" >立即提交</button>
				</view>
			</view>
		</view>
	</scroll-view>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
	const Infotext = ref(`
	  尊敬的商家:<br><br>
	  我们是福到家运营商,现诚挚邀请您加入我们的合作联盟,开启共赢之旅!<br><br>
	  我们拥有一批忠实且具有高消费能力的酒品会员。与我们合作,能为您的店铺带来稳定的客源。我们会在会员体系内全力推广您的店铺,包括在小程序首页推荐、向会员发送专属优惠信息等,让更多会员选择您。<br>
	  我们期待与餐饮、娱乐、休闲等各类商家合作,共同打造一个跨行业的优惠生态。现在就加入我们,共享商业繁荣!<br>
	  合作优势:<br>
	  -精准客源导入:我们的会员都是有消费实力和消费欲望的优质客户。<br>
	  -提升品牌知名度:通过我们的平台宣传,您的店铺将被更多人知晓。<br>
	  -长期稳定合作:我们致力于长期合作,为双方带来持续利益。
	`);
	const valiFormData=reactive({
		name:'',
		businessName:'',
		businessType:'',
		categoryArea:'',
		address:''
		
		
	
	})
	const valiFormDataTile=ref([{
		title:"姓名",
		pop:'name',
		text:'请输入姓名'
	},{
		title:"手机号",
		pop:'phone',
		text:'请输入手机号'
	},
	{
		title:"商家名称",
		pop:'businessName',
		text:'请输入商家名称'
	},
	{
		title:"商家类型",
		pop:'businessName',
		text:'请输入商家名称'
	},])
	
</script>


<style lang="scss" scoped>
	.cooperate-content-page{
		width: 100%;
		// height: 100vh;
		padding: 32rpx 32rpx;
		
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.cooperate-content-top{
			width: 100%;
			height: 430rpx;
			image{
				width: 100%;
				height: 100%;
			}
			
		}
		.cooperate-content-center{
			width: 100%;
			padding-top: 50rpx;
			.cooperate-aboutUs{
				width: 100%;
				min-height: 300rpx;
			
				text-align: center;
				position: relative;
				
					
				.cooperate-aboutUs-title{
					font-size:36rpx;
					font-weight: 700;
					color: lightpink;
					padding-bottom: 24rpx;
					
										
				}
			&::before{
				content: '';
				top:55rpx;
				left: 50%;
				width: 32rpx;
				height: 6rpx;
			
				background-color: pink;
				position: absolute;
				transform: translateX(-50%);
				}
				
				.cooperate-aboutUs-info{
					width: 97%;
					min-height: 300rpx;
					text-align: left;
					padding: 10rpx 10rpx;
					font-size: 28rpx;
					color: rgba(102, 102, 102, 1);
				}
				
				
			}
			.cooperate-joinUs{
				width: 100%;
				min-height: 300rpx;
				margin-top: 50rpx;
				text-align: center;
				position: relative;
				font-size:36rpx;
				font-weight: 700;
				color: lightpink;
				.cooperate-joinUs-title{
					font-size:36rpx;
					font-weight: 700;
					color: lightpink;
					padding-bottom: 24rpx;
									&::after{
										content: '';
										top: 55rpx;
										left: 50%;
										width: 32rpx;
										height: 6rpx;
										background-color: pink;
										position: absolute;
										transform: translateX(-50%);
										z-index: 1;
														
													}
														
								}
				:deep(.uni-forms-item){
					    height: 47px;
					    text-align: center;
						align-items: center;
						border-bottom: 1px solid;
						margin-bottom: 0px;
						
					}
				
								:deep(.uni-forms-item__label){
														 
														 font-size: 28rpx;
								}
								:deep(.uni-easyinput__content){
														 height: 68rpx;
														 width: 400rpx;
								}
								:deep(.uni-easyinput__placeholder-class){
									font-size: 28rpx;
									font-weight: 500;
								}
							
							
					
				
				
			}
			
		}
	}
	.submitbtn{
		margin-top: 96rpx;
	}
	       
</style>
